<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            user-select: none;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            background-color: black;
        }

        .root {
            width: 100%;
            height: 100%;
        }

        .mask {
            position: absolute;
            background-color: black;
            opacity: 0.5;
            z-index: 10;
            width: 100%;
            height: 100%;
        }

        video {
            width: 100%;
            z-index: 9;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }

        .content {
            position: absolute;
            z-index: 13;
            width: 100%;
            height: 100%;
        }

        .content>.bottom {
            height: 90%;
            width: 100%;
            font-size: 5vw;
            color: white;
            font-weight: 700;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .content>.bottom>h1 {
            height: 20%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .top {
            width: 100%;
            height: 10%;
            list-style: none;
            overflow: hidden;
            background-color: transparent;
            display: flex;
            align-items: center;
        }

        .top>li {
            flex: 1;
            height: 100%;
            font-size: 2vw;
            color: white;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 1vw;

            /* 毛玻璃特效 */
            backdrop-filter: saturate(110%) blur(100px);
        }

        .top>li:hover {
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="mask"></div>
        <video loop autoplay muted id="backgroundvideo"></video>
        <div class="content">
            <ul class="top">

            </ul>
            <div class="bottom">
                <h1 id="title"></h1>
            </div>
        </div>
    </div>

    <script>
        let tops = document.querySelector('.top')
        let backgroundvideo = document.querySelector('#backgroundvideo')
        let title = document.querySelector('#title')
        let arr = [{
                name: 'Akali',
                src: 'https://test-mikaisa.oss-cn-hangzhou.aliyuncs.com/Videos/LOL/2022%E6%98%9F%E4%B9%8B%E5%AE%88%E6%8A%A4%E8%80%85/%E9%98%BF%E5%8D%A1%E4%B8%BD.webm',
                cname: '阿卡丽'
            },
            {
                name: 'Taliya',
                src: 'https://test-mikaisa.oss-cn-hangzhou.aliyuncs.com/Videos/LOL/2022%E6%98%9F%E4%B9%8B%E5%AE%88%E6%8A%A4%E8%80%85/%E5%A1%94%E5%88%A9%E4%BA%9A.webm',
                cname: '塔利亚'
            },
            {
                name: 'Moganna',
                src: 'https://test-mikaisa.oss-cn-hangzhou.aliyuncs.com/Videos/LOL/2022%E6%98%9F%E4%B9%8B%E5%AE%88%E6%8A%A4%E8%80%85/%E8%8E%AB%E7%94%98%E5%A8%9C.webm',
                cname: '莫甘娜'
            },
            {
                name: 'Ruier',
                src: 'https://test-mikaisa.oss-cn-hangzhou.aliyuncs.com/Videos/LOL/2022%E6%98%9F%E4%B9%8B%E5%AE%88%E6%8A%A4%E8%80%85/%E8%8A%AE%E5%B0%94.webm',
                cname: '芮尔'
            },
            {
                name: 'Kuiyin',
                src: 'https://test-mikaisa.oss-cn-hangzhou.aliyuncs.com/Videos/LOL/2022%E6%98%9F%E4%B9%8B%E5%AE%88%E6%8A%A4%E8%80%85/%E5%A5%8E%E5%9B%A0.webm',
                cname: '奎因'
            },
        ]

        // 设置一个vsrc的全局变量，用来防止用户一直点击同一个视频背景的时候还会有切换文件的bug。
        let vsrc = arr[0].src

        backgroundvideo.src = arr[0].src
        title.innerHTML = `This is ${arr[0].name}`

        arr.forEach(item => {
            let li = document.createElement('li')
            li.innerHTML = item.cname
            li.onclick = () => {
                if (vsrc != item.src) {
                    vsrc = item.src
                    backgroundvideo.src = item.src
                    title.innerHTML = `This is ${item.name}`
                }
            }
            tops.appendChild(li)
        })
    </script>
</body>

</html>